<template>
<div>
    <div class="box" :class="{ 'box-bg':visible}"></div>
    <my-button @click=" visible = !visible">点击变化颜色与大小</my-button>
</div>
</template>

<script>
import myButton from '../3.21/myButton.vue'
export default {
  components: { myButton },
  data(){
      return{
          visible:false
      }
}
    
}

</script>
<style scoped>
.box{
    width: 200px;
    height: 200px;
    margin: 20px;
    background: red;
    transition:all 1s;
}
.box-bg{
    background: green;
    width: 400px;
    height: 300px;
}
.box:hover{
    background: blue;
    width: 400px;
    /* transform: scale(2,3) translate(-100px,50px); */
}
</style>